<template>
  <div class="header-contain">
    <div class="logo-contain">
      <slot name="logo"></slot>
    </div>
    <div class="funcArea">
     <slot name="functions"></slot>
    </div>
    <transition appear name="avatar_anime" >
    <div v-show="!login_status" class="btnContain">
      <el-button type="primary" v-on:click="loginShow">登录</el-button>
      <el-button type="warning" @click="go2Regist">注册</el-button>
    </div>
    </transition>
     <transition name="avatar_anime">
       <div v-show="login_status" class="demo-basic--circle" id="avatar">
         <el-popover placement="bottom-end" :width="200" trigger="hover">
           <template #reference>
             <div class="block">
               <el-avatar class="hvr-bounce-in" :size="50" :src="avatar"  fit="contain">
               </el-avatar>
             </div>
           </template>
           <!--头像hover插槽-->
           <slot name="avatar_slot"></slot>
         </el-popover>
       </div>
     </transition>
  </div>
</template>

<script>
import {useStore, createNamespacedHelpers, mapState} from "vuex";

export default {
  name: "index-header",

  computed:{
    login_status(){
      if(localStorage.getItem('satoken')!==null){
        this.$store.dispatch('user/setStatus',true)
        this.$store.dispatch('user/setMe',JSON.parse(localStorage.getItem('me')))
      }
      return this.$store.state.user.loginStatus
    },
    avatar(){
      return this.$store.state.user.me.avatar
    }
  },

  data(){
    return{
      login_cardShow: false
    }
  },
  methods:{
    showParent(){
      alert(this.avatar)
    },
/*    // 头像鼠标悬停样式改变
    circle_hoverChange: function () {
      this.circle_hover = 'avatar.jpeg'
    },
    // 头像鼠标移走样式恢复
    circle_hoverLeave: function () {
      this.circle_hover = 'avatar.jpeg'
    },*/


    loginShow(){
      //this.loginStatus = true
      this.login_cardShow = true
      this.$emit('func',this.login_cardShow)
    },
    logout(){
      this.loginStatus = false
    },
    go2Regist(){
      this.$router.push("/regist")
    }
  }
}
</script>

<style scoped>
.avatar_anime-enter-active{
  animation: rollIn 1s;
}
.avatar_anime-leave-active{
  animation: rollOut 1s;
}
#avatar {
  position: relative;
  right: 200px;
}
.header-contain{
  display: flex;
  background-color: rgba(133, 193, 233,0.5);
  width: 1536px;
  height: 80px;
  align-items: center;
  margin-left: -20px;
  justify-content: space-between;
}
.funcArea{
  width: 800px;
  position: absolute;
  left: 350px;
  height: 30px;
}

.btnContain{
  position: absolute;
  right:120px;
}

</style>